<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>WebSSH</title>
    <link rel="stylesheet" href="../css/xterm.css" />
    <!--<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">-->
</head>
<body>
<div>
    <div id="div" style="width: 15%;height: 100%;float: left">
        <p>服务器IP：<br><input type="text" id="host" value="" placeholder="输入服务器IP"  autocomplete="off" /></p>
        <p>端口：<br><input type="text" id="port" value="22" placeholder="输入端口" autocomplete="off" /></p>
        <p>SSH账号：<br><input type="text" id="username" value="root" placeholder="输入SSH账号" autocomplete="off" /></p>
        <p>密码：<br><input type="password" id="password" value="" placeholder="输入密码"  autocomplete="off" /></p>
        <button onclick="connect()">连接</button>
    </div>
    <div id="terminal" style="width: 80%;height: 100%;float: left"></div>
</div>

<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/xterm.js" charset="utf-8"></script>
<script src="../js/webssh.js" charset="utf-8"></script>
<script src="../js/webssh.js" charset="utf-8"></script>
<!--<script src="//unpkg.com/layui@2.6.8/dist/layui.js" charset="utf-8"></script>-->

<script>
    function connect() {
        let host = $("#host").val().trim();
        let port = $("#port").val().trim();
        let username = $("#username").val().trim();
        let password = $("#password").val().trim();
        if(host == ""){alert("请输入服务器IP")}
        if(port == ""){alert("请输入端口")}
        if(username == ""){alert("请输入SSH账号")}
        if(password == ""){alert("请输入密码")}
        openTerminal( {
            operate:'connect',
            host: host,//IP
            port: port,//端口号
            username:username,//用户名
            password: password//密码
        });
        // openTerminal( {
        //     operate:'connect',
        //     host: '47.104.165.227',//IP
        //     port: '22',//端口号
        //     username: 'root',//用户名
        //     password: '1qaz@123@QAZ'//密码
        // });
    }


    function openTerminal(options){
        var client = new WSSHClient();
        var term = new Terminal({
            cols: 97,
            rows: 37,
            cursorBlink: true, // 光标闪烁
            cursorStyle: "block", // 光标样式  null | 'block' | 'underline' | 'bar'
            scrollback: 800, //回滚
            tabStopWidth: 8, //制表宽度
            screenKeys: true
        });

        term.on('data', function (data) {
            //键盘输入时的回调函数
            client.sendClientData(data);
        });
        term.open(document.getElementById('terminal'));
        //在页面上显示连接中...
        term.write('Connecting...');
        //执行连接操作
        client.connect({
            onError: function (error) {
                //连接失败回调
                term.write('Error: ' + error + '\r\n');
            },
            onConnect: function () {
                //连接成功回调

                term.write(options);
                client.sendInitData(options);
            },
            onClose: function () {
                //连接关闭回调
                term.write("\rconnection closed");
            },
            onData: function (data) {
                //收到数据时回调
                term.write(data);
            }
        });
    }
</script>
</body>
</html>